<template>
  <div class="nav" :class="{ scrolled: isScrolled }">
    <img src="https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/logo.png" alt="" />
    <ul>
      <li @click="scrollToTop('首页')">首页</li>
      <li @click="scrollToTop('应用场景')">应用场景</li>
      <li @click="scrollToTop('精品案例')">精品案例</li>
      <li @click="scrollToTop('核心技术')">核心技术</li>
      <li @click="scrollToTop('关于我们')">关于我们</li>
    </ul>
    <div>
      <div style="color:#ffffff;cursor: pointer;font-size:16px" @click="handleGoWork">进入工作台 免费体验</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";

const isScrolled = ref(false);

const handleGoWork = () => {
  window.open("http://ai.yuanguxingqiu.com", "_blank");
};

const handleScroll = () => {
  if (window.scrollY > 300) {
    isScrolled.value = true;
  } else {
    isScrolled.value = false;
  }
};

// 返回顶部
const scrollToTop = (aa) => {
  switch (aa) {
    case "首页":
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
      break;
    case "应用场景":
      window.scrollTo({
        top: 600,
        behavior: "smooth",
      });
      break;
    case "精品案例":
      window.scrollTo({
        top: 1100,
        behavior: "smooth",
      });
      break;
    case "核心技术":
      window.scrollTo({
        top: 1990,
        behavior: "smooth",
      });
      break;
    case "关于我们":
      window.scrollTo({
        top: 2000,
        behavior: "smooth",
      });
      break;
    default:
      // window.location.href = 'https://m.sjxiyou.com/home/index';
      break;
  }
  // if(aa=='首页'){
  //   window.scrollTo({
  //   top: 0,
  //   behavior: "smooth",
  // });
  // }
};

onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});

onBeforeUnmount(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>

<style scoped>
.nav {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 57px;
  z-index: 100000;
  transition: background-color 0.3s;
  border-radius: 0px 0px;
}

.nav.scrolled {
  background: #333;
}

.nav img {
  width: 150px;
  padding-top: 10px;
  cursor: pointer;
  padding-bottom: 10px;
}

.nav ul {
  list-style: none;
  display: flex;
}

.nav ul li {
  margin-left: 20px;
  color: #c0bdbd;
  font-size: 16px;
  cursor: pointer;
}

.nav ul li:hover {
  color: #2c9bff;
}
</style>